<template>
	<ul class='fx h28 bor1 r100px select-more' :style='style' @click.stop='' v-if='fn.hasArray(data)'>
		<template v-for='(v,i) of data' :key='i'>
			<li
				class 	= 'cp h r100px fxmc rel' 
				:class 	= "{'bcm cf':index === i || ( (def ? index >= count : index > count) && i === count-1 ), 'plr10': !fn.hasArray(v.children), 'pl10 pr5': fn.hasArray(v.children), 'mlr2': i>0 && i<data.length-1}"
				style  	= 'min-width:70px'
				:style 	= "fn.hasArray(v.children)&&show&&!def ? { background:'#ddd' } : {}"
				@click 	='onChange(v, i)'
			>
				<h6>
					<template v-if='fn.hasArray(v.children)'>{{ activeName ?? v[nameStr] }}</template>
					<template v-else>{{ v[nameStr] }}</template>
				</h6>
				<template v-if='fn.hasArray(v.children)'>
					<DownOutlined class='ml5 ease arrow' :class="{'rotate-up':show}" style='font-size:12px' @click.stop='onShowChange'/>
					<dl v-show='show' class='abs_rt bcf g3 w' style='z-index:10;box-shadow:0 0 3px #999' :style="{top: height}">
						<dd 
							class		= 'tap plr10' 
							:class		= "[ value == c[idStr] ? 'bcm cf' : 'hover-bc' ]" 
							v-for		= '(c,j) of v.children' 
							:key		= 'j'
							@click.stop = 'onChange(c)'
						>{{c[nameStr]}}</dd>
					</dl>
				</template>
			</li>
		</template>
	</ul>
</template>

<script setup>
	/* --------------------------- Component --------------------------- */
	import { DownOutlined } from '@ant-design/icons-vue'
	/* --------------------------- props --------------------------- */
	const fn = $fn
	const props = defineProps({
		idStr 		: { type:String, default:$config.idStr },
		nameStr 	: { type:String, default:$config.nameStr },
		value 		: null,
		defValue 	: null,
		api 		: String,
		def 		: Boolean,
		data 		: { type: Array, default: [] },
		count 		: { type: Number,default:3 },
		size		: { type: [Number, String], default:'small' },
	})
	const { idStr, nameStr, count, api, def, defValue, size } = props
	
	/* --------------------------- Style --------------------------- */
	const height = $fn.isNumber(size) ? size + 'px' : ($config.antd.btnSize[size].height ?? '28px')
	let style = $ref({ height, lineHeight:height })
	/* --------------------------- Method --------------------------- */
	const getData = data => {
		const hasChildren = data.some( (v,i) => {
			if(v[idStr] === defValue){ index = i }
			v.index = i
			return Boolean(v.children)
		})
		let stack = data
		if(!hasChildren){
			if(data.length > count){
				const list = data.filter((v,i) => i < count)
				const children = data.filter((v,i)=> i>=count)
				if( def ){
					list[list.length -1].children = [ list[list.length -1], ...children]
					stack = list
				}else{
					stack = [...list, { [nameStr]:'更多', children  }]
				}
			}
		}
		return stack
	}
	/* --------------------------- ref --------------------------- */
	let value = $ref(defValue)
	let index = $ref(-1)
	let show = $ref()
	let activeName = $ref()
	let sourceData = $ref([])
	let data = $ref()
	/* --------------------------- Emit --------------------------- */
	const emit = defineEmits(['update:value','change', 'blur', 'getData'])
	/* --------------------------- api data --------------------------- */
	$fn.ajax({ ...props }).then( d => {
		sourceData = d
		data = getData(d)
		if(def && index >= count){
			activeName = d[index][nameStr]
		}
		emit('getData',d)
	} )
	/* --------------------------- Event --------------------------- */
	const onShow = () => {
		const node = document.querySelectorAll('.select-more')
		if(node){
			for(let v of node){
				if(v){
					const dl = v.querySelector('dl')
					const arrow = v.querySelector('.arrow')
					if(dl){ dl.style.display = 'none' }
					if(arrow){ arrow.className = arrow.className.replace('rotate-up','') }
				}
			}
		}
		show = false
	}
	
	const onChange = (row, i) => {
		if($fn.isValid(i)){
			if(row.children){ 
				if(def){
					index = row.index
					const hasValue = row.children.some(v => v.value === value)
					if(!hasValue){
						value = row.children[0][idStr]
						emit('update:value', value)
						emit('change', { value, row })
						return
					}
				}
			}else{
				activeName = null
				index = i
			}
		}else{
			activeName = row[nameStr]
			index = data.length - 1
			if(def){
				value = row[idStr]
				emit('update:value', value)
				emit('change', { value, row })
			}else{
				
			}
		}
		if(!row.children){
			value = row[idStr]
			emit('update:value', value)
			emit('change', { value, row })
		}
		onShow()
	}
	
	const onShowChange = () => {
		// onShow()
		show = !show
	}
	/* --------------------------- 全局事件 --------------------------- */
	
	
	window.addEventListener('click',onShow )
	
	$.onUnmounted(()=>{
		window.removeEventListener('click', onShow )
	})
	
</script>